import React, { Component } from 'react'
import { Layout, Menu, Breadcrumb, Icon , Form, Input, Button, Checkbox } from 'antd';
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

const FormItem = Form.Item;


export class TMDFields extends Component {

  constructor(props) {
    super(props)
 
  }

 handleSubmit=(e)=> {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }
  render() {
    const { getFieldDecorator } = this.props.form;
      const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        span: 14,
        offset: 6,
      },
    };
    console.log(this.props)
    return (
             <div>
                <Menu
                mode="inline"
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['input-single']}
                style={{ height: '100%' }}
              >
                <SubMenu key="input-single" title={<span><Icon type="file-text" />常用文本框</span>}>
                  <Menu.Item key="1">姓名<Icon type="plus" style={{float:"right",paddingTop:16}} /></Menu.Item>
                  <Menu.Item key="2">电话<Icon type="plus" style={{float:"right",paddingTop:16}} /></Menu.Item>
                  <Menu.Item key="3">邮箱<Icon type="plus" style={{float:"right",paddingTop:16}} /></Menu.Item>
                  <Menu.Item key="4">所在单位<Icon type="plus" style={{float:"right",paddingTop:16}} /></Menu.Item>
                  <Menu.Item key="5">详细地址<Icon type="plus" style={{float:"right",paddingTop:16}} /></Menu.Item>
                </SubMenu>
                <SubMenu key="sub2" title={<span><Icon type="laptop" /> 常用级联菜单</span>}>
                  <Menu.Item key="6">昆明市省区县</Menu.Item>
                  <Menu.Item key="7">全国省市</Menu.Item>
                  <Menu.Item key="8">行业分类</Menu.Item>
                </SubMenu>
                <SubMenu key="sub3" title={<span><Icon type="notification" /> 常用范围单选</span>}>
                  <Menu.Item key="9">性别</Menu.Item>
                </SubMenu>
              </Menu>
               <Form onSubmit={this.handleSubmit} className="login-form" style={{padding:20,borderTop:"1px solid #e9e9e9",borderRight:"1px solid #e9e9e9"}}>
                  <FormItem
                      {...formItemLayout}
                      style={{marginBottom:5}}
                      label="字段名称"
                      hasFeedback
                    >
                    {getFieldDecorator('label', {
                      rules: [{ required: true, message: '请输入该字段标签' }],
                    })(
                      <Input  placeholder="Label" />
                    )}
                  </FormItem>

                  <FormItem
                      {...formItemLayout}
                      style={{marginBottom:5}}
                      label="验证规则"
                      hasFeedback
                    >
                    {getFieldDecorator('verify', {
                      rules: [{ required: true, message: '请输入验证正则' }],
                    })(
                      <Input  placeholder="reg" />
                    )}
                  </FormItem>
                  <FormItem
                      {...formItemLayout}
                      style={{marginBottom:5}}
                      label="消息提示"
                      hasFeedback
                    >
                    {getFieldDecorator('errmessage', {
                      rules: [{ required: true, message: '请输入提示消息' }],
                    })(
                      <Input  placeholder="验证不通过时的提示消息" />
                    )}
                  </FormItem>
                   
                    <Button type="primary" htmlType="submit" >
                      添加
                    </Button>
                  
                </Form>
             </div>
    );

  }
};








 TMDFields=Form.create()(TMDFields);

export default TMDFields;
